<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>注册用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="用户名" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.user_nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="个性签名" width="250" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.user_introduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="'http://localhost:3001/'+scope.row.user_avator_url" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="240" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.user_create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.userid)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改用户信息的表单 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="昵称" prop="nickname" label-width='100px'>
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" label-width='100px'>
          <el-input v-model="form.introduction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width='100px'>
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleChange" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, deleteUser, editUserInfo } from '../../utils/api'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 控制修改用户信息的表单的显示
      dialogFormVisible: false,
      // 修改用户信息的表单的数据
      form: {
        // id password(4-12) nickname(1-10) sex  introduction avator 
        nickname: '',
        introduction: '',
        avator: null,
        id: 0,
        sex: ''
      },
      // 修改用户信息的表单的校验
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
      },
      // 表单图片预览
      imageUrl: '',
    }
  },
  created () {
    // 获取用户列表
    this.getUserL()
  },
  methods: {
    // 准备上传文件数据
    handleChange (file, fileList) {
      var imageUrl = URL.createObjectURL(file.raw)
      this.imageUrl = imageUrl
      if (fileList.length > 0) {
        this.form.avator = fileList[fileList.length - 1].raw
      }
    },
    // 编辑用户 准备全部数据
    handleEdit (scope) {
      this.form.nickname = scope.user_nickname;
      if (scope.user_introduction !== 'null') {
        this.form.introduction = scope.user_introduction;
      } else {
        this.form.introduction = '';
      }
      this.form.id = scope.userid;
      this.form.sex = scope.user_sex;
      // 显示修改用户信息的表单
      this.dialogFormVisible = true;
    },
    // 修改用户信息
    submitForm (formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          var fromData = new FormData();
          fromData.append('avator', this.form.avator);
          fromData.append('nickname', this.form.nickname);
          fromData.append('introduction', this.form.introduction);
          fromData.append('sex', this.form.sex);
          fromData.append('id', this.form.id);
          let res = await editUserInfo(fromData);
          if (res.status == 0) {
            this.$message({
              message: '修改用户信息成功！',
              type: 'success'
            });
            this.form.nickname = '';
            this.form.introduction = '';
            this.form.id = '';
            this.form.sex = '';
            this.form.avator = null;
            this.imageUrl = '';
            this.getUserL();
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 删除用户
    handleDelete (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteUser(id)
        if (res.status == 0) {
          this.$message({
            message: '删除用户成功！',
            type: 'success'
          });
          this.getUserL();
        } else {
          this.$message.error('删除用户失败！');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 获取用户列表
    async getUserL () {
      let res = await getUserList()
      if (res.status == 0) {
        this.tableData = res.data;
      } else {
        this.$message.error('获取用户列表失败！');
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>